/**
 * 名称：创建标签信息框
 * 作用：创建html标签信息框
 * 参数：
 * 状态：
 * 网址：
 * 负责人：
 */
// 记录标签图标点击
let labelIconClick = {
    div:'',
    imgPath:''
}
// 标签弹窗开启关闭开关
let labelBoxOff = true
function addLabelPopup(){
    if (labelBoxOff) {
        labelBoxOff = !labelBoxOff
        console.log('开始创建文本框')
        let html = organizationLabelIcon()
        const label = document.createElement("div");
        label.id = 'laberSettings-id'
        label.className = 'laberSettings'
        label.draggable= 'true'
        label.innerHTML = ' <!--头-->' +
            '        <div class="laberSettings-titer">' +
            '            <div>' +
            '                <span>' +
            '                    标签' +
            '                </span>' +
            '            </div>' +
            '            <div onclick="closeLabelPopup()">' +
            '                <img src="Source/Images/label/esc.png">' +
            '            </div>' +
            '        </div>' +
            '        <!--图片-->' +
            '        <div class="laberSettings-img">' +
            html +
            '        </div>' +
            '        <!--文字-->' +
            '        <div id="laberSettings-text-id" class="laberSettings-text" contenteditable>' +
            '        </div>' +
            '        <!--创建-->' +
            '        <div id="laberSettings-add-id" class="laberSettings-add">' +
            '            <button id="laberSettings-addLabel" onclick="addLabelIocn()">添加</button>' +
            '            <button id="laberSettings-update" style="display: none" onclick="updateLabel()">更新</button>' +
            '            <button id="laberSettings-cancel" style="display: none" onclick="cancelLabel()">取消</button>' +
            '            <button id="laberSettings-complete" style="display: none" onclick="completeLabel()">完成</button>' +
            '        </div>'
        document.body.appendChild(label)
        // 获取图标点击数据
        var layerSettings = document.getElementsByClassName("laberSettings-img-icon");
        for(let i=0;i<layerSettings.length;i++){
            layerSettings[i].setAttribute("index",i);
            layerSettings[i].onclick = function (){
                if (labelIconClick.div === '') {
                    // 得到父级，并给与背景颜色
                    labelIconClick.div = layerSettings[i].parentNode
                    labelIconClick.imgPath = layerSettings[i].src
                    layerSettings[i].parentNode.style="background-color: #02b58a"
                }else {
                    // 先复原上次颜色，在赋予下次颜色
                    labelIconClick.div.style="background-color: "
                    // 赋新值
                    labelIconClick.div = layerSettings[i].parentNode
                    labelIconClick.imgPath = layerSettings[i].src
                    // 给与颜色
                    layerSettings[i].parentNode.style="background-color: #02b58a"
                }
                console.log(layerSettings[i].parentNode)
                // 得到父级，并给与背景颜色
                layerSettings[i].parentNode.style="background-color: #02b58a"
            }
        }
        // 监听div变化
    }else {
        labelBoxOff = !labelBoxOff
        closeLabelPopup()
    }
}

/**
 * 名称：组织标签图标
 * 作用：根据图标数组循环创建标签html信息
 * 参数：
 * 状态：
 * 网址：
 * 负责人：
 */
let labelIconArr = ["Source/Images/label/laber1.png",
                            "Source/Images/label/laber2.png",
                            "Source/Images/label/laber3.png",
                            "Source/Images/label/laber4.png",
                            "Source/Images/label/laber5.png",
                            "Source/Images/label/laber6.png",
                            "Source/Images/label/2.png",
                            "Source/Images/label/3.png",
                            "Source/Images/label/4.png",
                            "Source/Images/label/5.png",
                            "Source/Images/label/6.png",
                            "Source/Images/label/7.png",
                            "Source/Images/label/8.png",
                            "Source/Images/label/9.png",
                            "Source/Images/label/10.png",
                            "Source/Images/label/11.png",
                            "Source/Images/label/12.png",
                            "Source/Images/label/13.png",
                            "Source/Images/label/14.png",
                            "Source/Images/label/15.png",
                            "Source/Images/label/16.png",
                            "Source/Images/label/17.png",
                            "Source/Images/label/18.png",
                            "Source/Images/label/19.png",
                            "Source/Images/label/20.png",
                            "Source/Images/label/21.png",
                            "Source/Images/label/22.png",
                            "Source/Images/label/23.png",
                            "Source/Images/label/24.png",
                            "Source/Images/label/25.png",
                            "Source/Images/label/26.png",
                            "Source/Images/label/27.png",
                            "Source/Images/label/28.png",
                            "Source/Images/label/29.png",
                            "Source/Images/label/30.png",
                            "Source/Images/label/31.png",
                            "Source/Images/label/32.png",
                            "Source/Images/label/33.png",
                            "Source/Images/label/34.png",
                            "Source/Images/label/35.png",
                            "Source/Images/label/36.png",
                            "Source/Images/label/37.png",
                            "Source/Images/label/38.png",
                            "Source/Images/label/39.png",
                            "Source/Images/label/40.png",
                            "Source/Images/label/41.png",
                            "Source/Images/label/42.png",
                            "Source/Images/label/43.png",
                            "Source/Images/label/44.png",
                            "Source/Images/label/45.png",
                            "Source/Images/label/46.png",
                            "Source/Images/label/47.png",
                            "Source/Images/label/48.png",
                            "Source/Images/label/49.png",
                            "Source/Images/label/50.png",
                            "Source/Images/label/51.png",
                            "Source/Images/label/52.png",
                            "Source/Images/label/53.png",
                            "Source/Images/label/54.png",
                            "Source/Images/label/55.png",
                            "Source/Images/label/56.png",
                            "Source/Images/label/57.png",
                            "Source/Images/label/58.png",
                            "Source/Images/label/59.png",
                            "Source/Images/label/60.png",
                            "Source/Images/label/61.png",
                            "Source/Images/label/62.png",
                            "Source/Images/label/63.png",
                            "Source/Images/label/64.png",
                            "Source/Images/label/65.png",
                            "Source/Images/label/66.png",
                            "Source/Images/label/67.png",
                            "Source/Images/label/68.png",
                            "Source/Images/label/69.png",
                            "Source/Images/label/70.png",
                            "Source/Images/label/71.png",
                            "Source/Images/label/72.png",
                            "Source/Images/label/73.png",
                            "Source/Images/label/74.png",
                            "Source/Images/label/75.png",
                            "Source/Images/label/76.png",
                            "Source/Images/label/77.png",
                            "Source/Images/label/78.png",
                            "Source/Images/label/79.png",
                            "Source/Images/label/80.png",
                            "Source/Images/label/81.png",
                            "Source/Images/label/82.png",
                            "Source/Images/label/83.png",
                            "Source/Images/label/84.png",
                            "Source/Images/label/85.png",
                            "Source/Images/label/86.png",
                            "Source/Images/label/87.png",
                            "Source/Images/label/88.png",
                            "Source/Images/label/89.png",
                            "Source/Images/label/90.png",
                            "Source/Images/label/91.png",
                            "Source/Images/label/92.png",
                            "Source/Images/label/93.png",
                            "Source/Images/label/94.png",
                            "Source/Images/label/95.png",
                            "Source/Images/label/96.png",
                            "Source/Images/label/97.png",
                            "Source/Images/label/98.png",
                            "Source/Images/label/99.png",
                            "Source/Images/label/100.png",
                            "Source/Images/label/101.png",
                            "Source/Images/label/102.png",
                            "Source/Images/label/103.png",
                            "Source/Images/label/104.png",
                            "Source/Images/label/105.png",
                            "Source/Images/label/106.png",
                            "Source/Images/label/107.png",
                            "Source/Images/label/108.png",
                            "Source/Images/label/109.png",
                            "Source/Images/label/110.png",
                            "Source/Images/label/111.png",
                            "Source/Images/label/112.png",
                            "Source/Images/label/113.png",
                            "Source/Images/label/114.png",
                            "Source/Images/label/115.png",
                            "Source/Images/label/116.png",
                            "Source/Images/label/117.png",
                            "Source/Images/label/118.png",
                            "Source/Images/label/119.png",
                            "Source/Images/label/120.png",
                            "Source/Images/label/121.png",
                            "Source/Images/label/122.png",
                            "Source/Images/label/123.png",
                            "Source/Images/label/124.png",
                            "Source/Images/label/125.png",
                            "Source/Images/label/126.png",
                            "Source/Images/label/127.png",
                            "Source/Images/label/128.png",
                            "Source/Images/label/129.png",
                            "Source/Images/label/130.png",
                            "Source/Images/label/131.png",
                            "Source/Images/label/132.png",
                            "Source/Images/label/133.png",
                            "Source/Images/label/134.png",
                            "Source/Images/label/135.png",
                            "Source/Images/label/136.png",
                            "Source/Images/label/137.png",
                            "Source/Images/label/138.png",
                            "Source/Images/label/139.png",
                            "Source/Images/label/140.png"
]
function organizationLabelIcon(){
    let html = ''
    for (const index in labelIconArr) {
        html += `<div><img src="${labelIconArr[index]}" class="laberSettings-img-icon"></div>`
    }
    console.log(html)
    return html
}

/**
 * 名称：关闭标签弹窗
 * 作用：将创建的标签弹窗直接进行删除
 * 参数：
 * 状态：
 * 网址：
 * 负责人：
 */
function closeLabelPopup(){
    document.getElementById('laberSettings-id').remove()
}

/**
 * 名称：创建标签
 * 作用：将创建的标签弹窗直接进行删除
 * 参数：
 * 状态：
 * 网址：
 * 负责人：
 */
function addLabelIocn(){
    // 删除文本显示框
    if (document.getElementById('info_box')!==undefined && document.getElementById('info_box') !== null) {
        document.getElementById('info_box').remove()
    }
    const text = document.getElementById('laberSettings-text-id').textContent;
    // 放开更新与取消标签，关闭添加标签
    document.getElementById('laberSettings-addLabel').style.display = 'none'
    document.getElementById('laberSettings-add-id').style.padding = '5% 30%'
    document.getElementById('laberSettings-update').style.display = 'block'
    document.getElementById('laberSettings-cancel').style.display = 'block'
    document.getElementById('laberSettings-complete').style.display = 'block'
    // 清除所有的鼠标事件
    deleteHandlerFu()
    let labelData = {
        label:null,
        textBox:null
    }
    // 创建鼠标点击事件,当存在创建之后后面的点击就是改变位置
    handler.setInputAction(function (click) {
        // 位置转换
        let position = positionAssembly(click.position)
        // 第一次为创建，第二次则为改变位置
        if (labelData.label === null) {
            // 创建图标
            labelData.label = monitorEntity(position, text)
            // 创建文字
            labelData.textBox = addTextBox(position, text)
        }else {
            // 改变广告牌位置
            labelData.label.position = position
            // 改变文本框位置
            changeTextBoxPosition(position)
        }
        //处理跟随
        viewer.scene.postRender.addEventListener(function(percentage) {
            changeTextBoxPosition(position)
        })
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
}

/**
 * 名称：改变文本框位置
 * 作用：通过传入的坐标信息更改文本框在屏幕上面的位置
 * 参数：position:坐标
 * 状态：
 * 网址：
 * 负责人：
 */
function changeTextBoxPosition(position){
    let labelBox = document.getElementById('info_box')
    //转换到屏幕坐标
    if (position && labelBox !== null) {
        let winpos = viewer.scene.cartesianToCanvasCoordinates(position);
        if (winpos) {
            labelBox.style.left = (winpos.x - 150 / 2).toFixed(0) + 'px';
            labelBox.style.top = (winpos.y - 150).toFixed(0) + 'px';
        }
    }
}


/**
 * 名称：创建广告牌
 * 作用：通过传入的仅为度，与文字
 * 参数：position:坐标， text：标签文字
 * 状态：
 * 网址：
 * 负责人：
 */
// 记录当前创建的标签，在删除的时候使用
let recordNewLabelData = {
    label:null
}
function monitorEntity(position, text){
    let id = Date.now()
    var monitorEntity = viewer.entities.add({
        id: id,
        name: "video",
        position: position,
        label: { //文字标签
            text: text,
            font: '500 30px Helvetica',
            scale: 0,
            style: Cesium.LabelStyle.FILL,
            fillColor: Cesium.Color.WHITE,
            pixelOffset: new Cesium.Cartesian2(-8, -35),
            showBackground: false,
            backgroundColor: new Cesium.Color(0.5, 0.6, 1, 1.0)
        },
        billboard: { //图标
            image: labelIconClick.imgPath,
            width: 100,
            height: 100,
            scale: 0.5,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            pixelOffset: new Cesium.Cartesian2(0, -20) // 调整弹框位置
        },
    })
    recordNewLabelData.label = monitorEntity
    return monitorEntity
}

/**
 * 名称：创建文本弹窗
 * 作用：通过传入的仅为度，与文字
 * 参数：position:坐标， text：标签文字
 * 状态：
 * 网址：
 * 负责人：
 */
function addTextBox(position,text){
    let winpos = viewer.scene.cartesianToCanvasCoordinates(position);
    let htmlDivElement = document.createElement("div");
    htmlDivElement.id = 'info_box'
    htmlDivElement.textContent = text
    if (winpos) {
        console.log('存在坐标信息：', winpos)
        htmlDivElement.style.left = (winpos.x - 150 / 2).toFixed(0) + 'px';
        htmlDivElement.style.top = (winpos.y - 150).toFixed(0) + 'px';
    }
    document.body.appendChild(htmlDivElement)
    console.log('查看你标签信息：', htmlDivElement)
}

/**
 * 名称：更新标签
 * 作用：点击更新按钮进行调用
 * 参数：
 * 状态：
 * 网址：
 * 负责人：
 */
function updateLabel(){
    const text = document.getElementById('laberSettings-text-id').textContent;
    // 更新的就是图标或者文字
    recordNewLabelData.label.label.text = text
    recordNewLabelData.label.billboard.image = labelIconClick.imgPath
    document.getElementById('info_box').textContent = text
}

/**
 * 名称：取消标签创建
 * 作用：点击取消按钮进行调用
 * 参数：
 * 状态：
 * 网址：
 * 负责人：
 */
function cancelLabel(){
    if (recordNewLabelData.label!==null){
        console.log(recordNewLabelData.label.id)
        viewer.entities.remove(recordNewLabelData.label)
        if (document.getElementById('info_box')!==null){
            document.getElementById('info_box').remove()
        }
    }
    document.getElementById('laberSettings-addLabel').style.display = 'block'
    document.getElementById('laberSettings-add-id').style.padding = '5% 40%'
    document.getElementById('laberSettings-update').style.display = 'none'
    document.getElementById('laberSettings-cancel').style.display = 'none'
    document.getElementById('laberSettings-complete').style.display = 'none'
}

/**
 * 名称：完成标签创建
 * 作用：点击完成按钮进行调用
 * 参数：
 * 状态：
 * 网址：
 * 负责人：
 */
function completeLabel(){
    // 取消图标div背景颜色
    labelIconClick.div.style = "background-color: "
    document.getElementById('laberSettings-text-id').textContent = ''
    labelIconClick.div = ''
    labelIconClick.imgPath = ''
    document.getElementById('laberSettings-addLabel').style.display = 'block'
    document.getElementById('laberSettings-add-id').style.padding = '5% 40%'
    document.getElementById('laberSettings-update').style.display = 'none'
    document.getElementById('laberSettings-cancel').style.display = 'none'
    document.getElementById('laberSettings-complete').style.display = 'none'
    if (document.getElementById('info_box')!==null){
        document.getElementById('info_box').remove()
    }
    iconClick()
}
// 广告牌点击显示弹窗
// 控制点击的气泡框显隐
let labelDisplayOff = true
function iconClick(){
    // 清除所有的鼠标事件
    deleteHandlerFu()
    handler.setInputAction(function (click) {
        let position,text = null
        // 获取点击信息
        let pickedFeature = viewer.scene.pick(click.position)
        if (pickedFeature !== undefined) {
        if (labelDisplayOff){
            labelDisplayOff = !labelDisplayOff
            if (document.getElementById('info_box')!==null){
                document.getElementById('info_box').remove()
            }
                text = pickedFeature.id.label.text._value
                position = pickedFeature.id.position._value
                addTextBox(position, text)
        }else {
            labelDisplayOff = !labelDisplayOff
            if (document.getElementById('info_box')!==null){
                document.getElementById('info_box').remove()
            }
        }
        }else {
            if (document.getElementById('info_box')!==null){
                document.getElementById('info_box').remove()
            }
        }
        //处理跟随
        viewer.scene.postRender.addEventListener(function(percentage) {
            changeTextBoxPosition(position)
        })
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
}
